<template>
	<zui-box>
		<view class="navbar">
			<u-navbar :fixed="true" title=" " @leftClick="xz_back()" @rightClick="right_fun" :safeAreaInsetTop="true" bgColor="rgb(131, 28, 25)" title-color="white">
				<view class="u-nav-slot" slot="left"><u-icon color="#ffffff" name="arrow-left" size="19"></u-icon></view>
				<view class="u-nav-slot" slot="right"><view class="right_text">充值记录</view></view>
				<view class="title" slot="center">充值</view>
			</u-navbar>
		</view>

		<view class="img_box"><image src="~@/static/img/chongzhi_show.png"></image></view>
		<!-- 选择方式 -->
		<view class="img_opt_box">
			<scroll-view scroll-y="true" class="scrollbox">
				<block v-for="val in list" :key="val.id">
					<view class="black" @click="changetype(val)">
						<view class="item" :class="{ active: recharge_type == val.id }">
							<image :src="val.bg_image"></image>
							<view class="tit">{{ val.channel_name }}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<u-gap height="50rpx"></u-gap>
		<u-form>
			<view v-if="type == 'bank' && bankinfo.receipt_number">
				<zui-flat class="form">
					<u-form-item label="开户行名称"><u-input readonly placeholder="加载中" readonly v-model="bankinfo.receipt_bank" border="none"></u-input></u-form-item>
				</zui-flat>
				<u-gap height="30rpx"></u-gap>
				<zui-flat class="form">
					<u-form-item label="银行卡号" @click="copydata(bankinfo.receipt_number)">
						<u-input readonly placeholder="加载中" readonly v-model="bankinfo.receipt_number" border="none"></u-input>
						<u-icon slot="right" name="share-square" color="#fff"></u-icon>
					</u-form-item>
				</zui-flat>
				<u-gap height="30rpx"></u-gap>
				<zui-flat class="form">
					<u-form-item label="开卡人"><u-input readonly placeholder="加载中" readonly v-model="bankinfo.receipt_company" border="none"></u-input></u-form-item>
				</zui-flat>
			</view>

			<u-gap height="30rpx"></u-gap>
			<zui-flat class="form">
				<u-form-item label="付款金额"><u-input placeholder="请输入充值金额" v-model="recharge_num" border="none"></u-input></u-form-item>
			</zui-flat>
		</u-form>
		<u-gap height="30rpx"></u-gap>
		<zui-flat v-if="type == 'bank' && bankinfo.receipt_number">
			<zui-start padding="30rpx"><view class="flat_title">上传支付凭证</view></zui-start>
			<view class="up_img" @click="upimgs">
				<image src="../../static/img/up_img.png" class="noimg" mode="" v-if="!payment_voucher"></image>
				<image :src="httpPath + payment_voucher" mode="" v-else></image>
			</view>
			<u-gap height="50rpx"></u-gap>
		</zui-flat>

		<zui-button bgColor="#AA334F" @fun="save">提交</zui-button>

		<view id="payDiv" v-show="false">h5支付</view>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			bankinfo: {},
			type: '',
			recharge_type: '',
			recharge_num: '10',
			payment_voucher: ''
		};
	},
	onShow() {
		this.get_info();
	},
	methods: {
		get_info() {
			uni.$u.http
				.get('/app/payment_channel/rechargeChannelList', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					let newlist = [];
					// 判断app h5
					// #ifdef APP
					res.forEach(item => {
						if (item.type.indexOf('_h5') == -1) {
							newlist.push(item);
						}
					});
					console.log('app', newlist);
					// #endif

					// #ifdef H5

					res.forEach(item => {
						if (item.type.indexOf('_app') == -1) {
							newlist.push(item);
						}
						newlist.push(item);
					});
					console.log('h5', newlist);
					// #endif

					this.type = newlist[0].type;
					this.recharge_type = newlist[0].id;
					this.list = newlist;
				})
				.catch(err => {});
		},
		getbankinfo() {
			uni.$u.http
				.get('/app/setting/getGroup?group=recharge', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.bankinfo = res;
				})
				.catch(err => {});
		},
		changetype(data) {
			if (data.type == 'bank' && JSON.stringify(this.bankinfo) == '{}') {
				this.getbankinfo();
			}
			this.type = data.type;
			this.recharge_type = data.id;
		},
		copydata(data) {
			uni.setClipboardData({
				data: data,
				success: function() {
					console.log('success');
				}
			});
		},
		right_fun() {
			this.xz_go('rechargelist');
		},
		upimgs() {
			let that = this;
			uni.chooseImage({
				count: 1,
				sourceType: ['album '],
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					console.log(tempFilePaths);
					uni.showLoading({
						title: '上传中'
					});
					uni.uploadFile({
						url: `${that.httpPath}/app/tool/uploadImage`,
						filePath: tempFilePaths,
						name: 'image',
						success: res => {
							uni.hideLoading();
							let data = JSON.parse(res.data);
							if (data.code == 1) {
								this.payment_voucher = `${data.data}`;
							} else {
								uni.showToast({
									title: data.msg,
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: err => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败'
							});
						}
					});
				}
			});
		},
		save() {
			if (!this.recharge_num) return this.say('请输入充值金额');

			if (this.type == 'bank') {
				if (!this.payment_voucher) return this.say('请上传支付凭证');
			}
			// uni.showLoading({
			// 	title: '支付中...'
			// });
			uni.$u.http
				.post(
					'/app/order_recharge/recharge',
					{
						recharge_type: this.recharge_type,
						recharge_num: this.recharge_num,
						payment_voucher: this.payment_voucher
					},
					{
						params: {},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					}
				)
				.then(res => {
					if (this.type.indexOf('_app') != -1) {
						console.log('app支付',res.non_str);
						this.app_wx_ali_pay(res.non_str);
					} else if (this.type.indexOf('_h5') != -1) {
						console.log('h5支付');
						this.web_pay(res.non_str);
					} else if (this.type.indexOf('bank') != -1) {
						console.log('bank支付');
					}
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		//alipay	支付宝支付	 wxpay	微信支付
		app_wx_ali_pay(data) {
			let that = this;
			uni.hideLoading();
			let paydata = {
				ali_app: 'alipay',
				wechat_app: 'wxpay'
			};
			let orderInfo;
			if (paydata[that.type] == 'wxpay') {
				orderInfo = JSON.stringify(data);
			} else {
				orderInfo = data;
			}
			uni.requestPayment({
				provider: paydata[that.type],
				orderInfo: orderInfo,
				success: function(res) {
					uni.hideLoading();
					console.log('success:' + JSON.stringify(res));
					uni.$u.toast('支付成功');
					that.recharge_num = '';
					that.payment_voucher = '';
				},
				fail: function(err) {
					uni.hideLoading();
					uni.$u.toast('支付失败');
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		// h5支付
		web_pay(data) {
			this.payment_voucher = '';
			this.recharge_num = '';
			let html = JSON.stringify(data);
			let div = document.querySelector('#payDiv');
			if (!div) {
				div = document.createElement('div');
				div.id = 'payDiv';
				document.body.appendChild(div);
			}
			div.innerHTML = html;
			document.forms[0].submit();

			// uni.$u.toast('成功');
		}
	}
};
</script>

<style lang="scss" scoped>
.navbar {
	font-size: 30rpx;

	/deep/.title {
		color: #fff;
	}

	/deep/.u-icon {
		padding: 10rpx;
		border-radius: 50%;
		// background:rgba(35 ,159 ,229,0.85);
	}

	.right_text {
		color: #fff;
	}
}
.img_box {
	width: 750rpx;
	height: 240rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.up_img {
	width: 100%;
	padding: 30rpx 30rpx 0;
	box-sizing: border-box;
	min-height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.noimg {
		width: 160rpx;
		height: 160rpx;
	}
	image {
		max-width: 90%;
		min-width: 160rpx;
		min-height: 160rpx;
	}
}
/deep/.item__body__right__content__icon {
	margin-left: 10rpx;
}
.form {
	color: #fff;
}
.img_opt_box {
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	.scrollbox {
		width: 100%;
		white-space: nowrap;
		/deep/.uni-scroll-view {
			overflow-x: auto !important;
		}
		.black {
			display: inline-block;
			margin-right: 20rpx;
		}
		.item {
			width: 180rpx;
			padding: 10rpx 0;
			border: 2rpx solid #AA334F;
			border-radius: 10rpx;
			background: #AA334F;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				width: 62rpx;
				height: 62rpx;
				margin-bottom: 20rpx;
			}
			.tit {
				color: #fff;
				font-size: 26rpx;
			}
		}
		.active {
			border: 2rpx solid #ffffff;
		}
	}
}

/* 	//底部按钮组 */
.cell_list {
	padding: 0 30rpx;
	box-sizing: border-box;
	margin: 0 auto;

	/deep/.u-cell__title-text {
		color: #fff !important;
		font-size: 28rpx;
	}
	/deep/.u-cell__left-icon-wrap {
		margin-right: 20rpx;
	}
	/deep/.u-cell--clickable {
		background: #232539;
	}
	/deep/.u-cell {
		background: #232539;
		border-radius: 20rpx;
	}
	/deep/.u-cell__value {
		color: #bfbfbf !important;
	}
}

/deep/.u-form-item__body__left__content {
	flex: none !important;
}
/deep/.u-form-item__body__left__content__label {
	font-size: 28rpx !important;
	color: #fff !important;
}
/deep/.u-input__content__field-wrapper__field {
	text-align: right !important;
	color: #fff !important;
}
/deep/.input-placeholder {
	color: #fff !important;
}

.start_name {
	padding: 0 30rpx;
	box-sizing: border-box;
	color: #e73333;
	font-size: 24rpx;
}

.flat_title {
	color: #fff;
	font-size: 28rpx;
}
</style>
